<script lang="ts">
export default {
  name: "ElsScroll",
};
</script>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { IElsScroll } from "./inter";
// import { useI18n } from "vue-i18n";
import ScrollUtil from "./scrollUtil";
//
// interface IProps extends /* @vue-ignore */ IElsScroll.Props {
//   class?: string;
//   style?: string;
//   autoHide?: boolean;
//   thumbClass?: string | [x: string, y: string];
//   thumbXClass?: string;
//   thumbYClass?: string;
//   trackClass?: string | [x: string, y: string];
//   trackXClass?: string;
//   trackYClass?: string;
//   thumbMinSize?: number;
//   scrollClass?: string;
//   scrollYClass?: string;
//   scrollXClass?: string;
//   trackSize?: number | [width: number, height: number]; // [竖向导轨宽度 横向导轨高度]
// }
//
const props = withDefaults(defineProps<IElsScroll.Props>(), {
  autoHide: true,
  trackClass: "",
  trackXClass: "h-10",
  trackYClass: "w-10",
  thumbClass: "rd-10 bg-#000 op-30 hover-op-70 box-shadow",
  thumbXClass: "h-5 transition-height-500 hover-h-10",
  thumbYClass: "w-5 transition-width-500 hover-w-10",
  thumbMinSize: 20,
  scrollClass: "important-op-70 box-shadow",
  scrollYClass: "important-w-10",
  scrollXClass: "important-h-10",
  trackSize: 10,
});
//
const containerRef = ref<HTMLElement>();
const contentRef = ref<HTMLElement>();
const trackXRef = ref<HTMLElement>();
const trackYRef = ref<HTMLElement>();
const thumbXRef = ref<HTMLElement>();
const thumbYRef = ref<HTMLElement>();

//
const SU = new ScrollUtil({
  containerRef,
  contentRef,
  trackXRef,
  trackYRef,
  thumbXRef,
  thumbYRef,
  minThumbSize: props.thumbMinSize,
  autoHide: props.autoHide,
  trackSize: props.trackSize,
});
//
onMounted(() => {
  setTimeout(() => {
    nextTick(() => {
      SU.init();
      SU.registEvent();
    });
  }, 0);
});

// const test = () => {
//   console.log('====================test')
// }
</script>

<template>
  <div
    ref="containerRef"
    class="relative block p-0 m-0 els-scroll w-100% h-100%"
  >
    <div
      ref="contentRef"
      class="_scroll-wapper important-w-100% important-h-100% relative overflow-auto"
      :class="props.class || ''"
      :style="props.style || ''"
    >
      <div h-auto w-auto>
        <slot @hook:mounted="test"></slot>
      </div>
      
    </div>
    <div
      ref="trackXRef"
      v-if="SU.showX.value"
      v-show="SU.trackVisible.value"
      :class="[
        'absolute transition-opacity-1000 left-0 bottom-0 z-9999',
        trackXClass,
        trackClass,
      ]"
      :style="`width:calc(100% - ${SU.alignSize.value[0]}px);height:${SU.trackXSize}px;opacity:${SU.trackOpacity.value}`"
    >
      <div
        ref="thumbXRef"
        :class="[
          'absolute bottom-0',
          thumbXClass,
          thumbClass,
          SU.isScrollX.value ? `${scrollClass} ${scrollXClass}` : '',
        ]"
        :style="`width:${SU.thumbXSize.value}px;left:${SU.offsetX.value}px`"
      ></div>
    </div>
    <div
      ref="trackYRef"
      v-if="SU.showY.value"
      v-show="SU.trackVisible.value"
      :class="[
        'absolute transition-opacity-1000 right-0 top-0 z-9999',
        trackYClass,
        trackClass,
      ]"
      :style="`height:calc(100% - ${SU.alignSize.value[1]}px);width:${SU.trackYSize}px;opacity:${SU.trackOpacity.value}`"
    >
      <div
        ref="thumbYRef"
        :class="[
          'absolute right-0',
          thumbYClass,
          thumbClass,
          SU.isScrollY.value ? `${scrollClass} ${scrollYClass}` : '',
        ]"
        :style="`height:${SU.thumbYSize.value}px;top:${SU.offsetY.value}px`"
      ></div>
    </div>
  </div>
</template>

<style scoped>
._scroll-wapper {
  &::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
  }
}

.box-shadow {
  box-shadow: 0 0 10px 0 #000;
}
</style>
